<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String contextPath = request.getContextPath();
	if(session.getAttribute("logined")== null){
		response.sendRedirect(contextPath + "/index.jsp");
	}	
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>准备好跟我携手一起了么？</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		var bgHeight = $("section.homeBody").height();
		var t = window.innerHeight-$("header").height();
		var innerWidth = window.innerWidth;
		if(bgHeight < t)
			bgHeight = t;
		$("section.background").css({
			height:bgHeight,
		});
		
		$(".grip").css({
			height:bgHeight - 60 - 20,
			left: innerWidth/2
		});
		
		$(".boyGravatar").css({
			left: innerWidth/2 - 60 - $(".gravatar").width()
		});
		
		$(".girlGravatar").css({
			left: innerWidth/2 + 60 
		});
		
		$(".content .boy").css({
			width:innerWidth/2 - 10
		});
		
		$(".content .girl").css({
			width:innerWidth/2 - 16
		});

		$(".setting").click(function(){
			$(".menu_item").toggle().click(function(){
				$(".menu_item").hide();
			});;
		});
		
		var animate_ctrs = [{left:20,bottom:90,speed:200},
		                    {left:60,bottom:80,speed:300},
		                    {left:90,bottom:50,speed:400},
		                    {left:100,bottom:10,speed:500}];

		$(".controlWrapper,.ctrWrapper").click(function(){
			if($(".ctrWrapper").css("opacity")==0){
				$(".ctrWrapper").toggle();
				$(".ctrWrapper").each(function(idx){
					var ac = animate_ctrs[idx];
					$(this).stop().animate({
						opacity:1,
						left:ac.left,
						bottom:ac.bottom
					},ac.speed);
				});
			}else if($(".ctrWrapper").css("opacity")==1){
				$(".ctrWrapper").each(function(idx){
					var ac = animate_ctrs[idx];
					var THIS = $(this);
					THIS.stop().animate({
						opacity:0,
						left:9,
						bottom:9
					},ac.speed/2,function(){
						THIS.hide();
					});
				});
			}
		});
	});
</script>
</head>
<body>
	<header>
		<div class="logo">
			<a href="<%=contextPath%>/index.jsp"><img src="img/kitty64.png" width="60" /></a>
		</div>
		<div class="title">小窝</div>
		<div class="rightMenu">
			<ul style="	color:#3B5998;">
				<!-- <li><a href="<%=contextPath%>/action?action=user&method=logout">走啦</a></li> -->
				<li><img class="setting" alt="设置" src="img/icon/white/png/cog_icon&48.png"></li>
				<li class="menu_item logout"><a href="<%=contextPath%>/action?action=user&method=logout">走了</a></li>
				<li class="menu_item invite">邀请</li>
				<li class="menu_item profile">资料</li>
			</ul>
		</div>
	</header>
	<section class="background"></section>
	<section class="homeBody">
		<article>
			<div class="heart"><img src="img/Heart-orange-icon.png" height = "55"/></div>
			<div class="content">
				<div class="boy">boy</div>
				<div class="event"><img src="img/icon/white/png/emotion_smile_icon&24.png" width="20"/></div>
				<div class="girl">girl</div>
			</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
			<div class="title">&nbsp;</div>
		</article>
	</section>
	<div class="boyGravatar gravatar"><img src="img/boy.jpg" height="60"/></div>
	<div class="girlGravatar gravatar"><img src="img/girl.jpg" height="60"/></div>
	<div class="grip"></div>
	<div class="controlWrapper ctr">
		<div class="control">+</div>
	</div>
	<div class="ctrWrapper ctrChat">
		<div class="control"><img src="img/icon/white/png/chat_bubble_message_square_icon&24.png" width="13"/></div>
	</div>
	<div class="ctrWrapper ctrImage">
		<div class="control"><img src="img/icon/white/png/photo_icon&24.png" width="15"/></div>
	</div>
	<div class="ctrWrapper ctrLocation">
		<div class="control"><img src="img/icon/white/png/pin_map_icon&24.png" width="15"/></div>
	</div>
	<div class="ctrWrapper ctrCall">
		<div class="control"><a href="tel:15874201833"><img src="img/icon/white/png/phone_touch_icon&24.png" width="15"/></a></div>
	</div>
	
</body>
</html>